import React from "react";
import {
  View,
  TextInput,
  StyleSheet,
  TouchableOpacity,
  GestureResponderEvent,
} from "react-native";

interface CustomInputProps {
  icon: React.ReactNode; // 左侧图标
  placeholder: string;
  value: string;
  onChangeText: (text: string) => void;
  editable?: boolean;
  onPress?: (event: GestureResponderEvent) => void;
}

const CustomInput = ({
  icon,
  placeholder,
  value,
  onChangeText,
  onPress,
  editable = true,
  ...props
}: CustomInputProps) => {
  return (
    <View style={styles.container}>
      {icon && <View style={styles.iconContainer}>{icon}</View>}
      <TextInput
        style={styles.textInput}
        placeholder={placeholder}
        value={value}
        onChangeText={onChangeText}
        editable={editable}
        {...props}
      />
      {/* 当有 onPress 事件时，使用一个绝对定位的 TouchableOpacity 覆盖在输入框上 */}
      {onPress && (
        <TouchableOpacity
          style={styles.overlay}
          onPress={onPress}
          activeOpacity={0.7}
        />
      )}
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#f0f0f0",
    borderRadius: 8,
    paddingHorizontal: 15,
    marginVertical: 10,
    height: 50,
    borderWidth: 1,
    borderColor: "#e0e0e0",
  },
  iconContainer: {
    marginRight: 10,
  },
  textInput: {
    flex: 1,
    paddingVertical: 10,
    fontSize: 16,
    color: "#333",
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: "transparent",
    zIndex: 1,
  },
});

export default CustomInput;
